<template>
  <div>
    <el-col>
      <el-menu :default-active="this.$route.path" router class="el-menu-vertical-demo" unique-opened background-color="#304156" text-color="#fff" active-text-color="#ffd04b">
        <div v-for="(item,index) in menu" :key="index" class="menu">
          <template>
            <!-- 没有子菜单的路由 -->
            <el-menu-item v-if="item.path===''" :index="item.children[0].path">
              <i :class="item.icon"></i>
              <span slot="title">{{item.children[0].meta.title}}</span>
            </el-menu-item>

            <!-- 有子菜单的路由 -->
            <el-submenu v-else :index="item.path">
              <template slot="title">
                <i :class="item.icon"></i>
                <span>{{item.meta.title}}</span>
              </template>
              <el-menu-item v-for="(value,index) in item.children" :key="index" :index="item.path+'/'+value.path">{{value.meta.title}}</el-menu-item>
            </el-submenu>
          </template>

        </div>

      </el-menu>
    </el-col>
  </div>
</template>

<script>
import { getRole_api } from "@/api/user.js";
//引入路由文件
import router, { asyncRoutes } from "@/router";
export default {
  data() {
    return {
      menu: [],
    };
  },
  methods: {},
  async created() {
    let res = await getRole_api();
    let role = res.data.role;
    // console.log(role);

    //动态路由-->封装两个函数，过滤路由
    //定义一个函数，用来判断当前路由对象有没有权限
    function hasRole(role, rout) {
      if (rout.meta && rout.meta.roles) {
        //代表当前路由对象有权限
        return rout.meta.roles.includes(role);
      } else {
        //不需要权限也可以访问
        return true;
      }
    }

    //在定义一个函数，用来过滤路由对象，需要权限访问的路由过滤出来
    function filterRouters(role, routers) {
      // filter-- > 满足条件的返回出去;
      let newArr = routers.filter((item) => {
        if (hasRole(role, item)) {
          // 有权限的就过滤出来
          //还需要过滤一下二级路由
          if (item.children) {
            //递归过滤
            item.children = filterRouters(role, item.children);
          }

          return true;
        } else {
          //不要过滤出来
          return false;
        }
      });
      return newArr;
    }
    let fRouters = filterRouters(role, asyncRoutes);
    // console.log(fRouters);
    //vue-router允许我们动态添加路由
    router.addRoutes(fRouters); //router.options.routes已经变成了我们添加的路由
    //将所有isshow为true的路由过滤出来,代表要在左边菜单显示
    this.menu = fRouters.filter((item) => item.isshow);
    console.log(this.menu);
  },
};
</script>

<style lang="less" scoped>
.menu {
  span {
    font-size: 16px;
  }
  i {
    margin-right: 8px;
    color: #fff;
    font-size: 20px;
  }
}

/* // 定义一个函数,用来判断当前的路由对象有没有权限
    function hasRole(roles, routers){
        if( routers.meta && routers.meta.roles ){
          // 代表当前路由对象有权限
          return routers.meta.roles.includes(roles)
        }else{
          // 不需要权限都可以访问
          return true
        }
    }

    // 再定义一个函数，用来过滤路由对象，把需要权限访问的路由过滤出来
    function filterRouters(roles, routers){
      let newArr = routers.filter( item => {
        if( hasRole(roles, item) ){
          // 有权限的就过滤出来  过滤的是一级路由
          if( item.children ){
            // 递归过滤二级路由
            item.children = filterRouters(roles, item.children);
          }
          return true
        }else{
          // 不过滤出来
          return false
        }
      })
      
      return newArr
    }
    let fRouters = filterRouters(role,asyncRoutes);
    // console.log(fRouters)
    // vue-router允许我们动态添加路由
    router.addRoutes(fRouters)
    // 把所有isshow为true的数据过滤出来  代表要在左边菜单显示
    this.menu = fRouters.filter( item => item.isshow )
    console.log(this.menu) */
</style>

